<template>
    <element-container :isShowTitle="true" :isLeft="true" :isRight="true" :isRightSearch="true" >
        <el-tag type="info" slot="left-title">{{editTitle}}</el-tag>
        <el-form :model="dataDialog.data" :rules="dataDialog.rules" ref="dataDialogForm" label-width="100px" size="mini"
                 :disabled="dataDialog.disabled" slot="left-main">
            <el-form-item label="路由名称"  prop="code" >
                <el-input type="text" placeholder="请输入路由名称" v-model="dataDialog.data.code" width="100px" ></el-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="name" >
                <el-input type="text" placeholder="请输入角色名称" v-model="dataDialog.data.name" ></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description" >
                <el-input type="textarea" placeholder="请输入描述" v-model="dataDialog.data.description"></el-input>
            </el-form-item>
        </el-form>
        <template slot="left-button" >
            <el-button  icon="el-icon-check" @click="saveData" title="保存" size="mini"
                       v-if="dataDialog.isVisible && !dataDialog.disabled "></el-button>
            <el-button  icon="el-icon-check" @click="saveData" title="修改" size="mini"
                       v-if="!dataDialog.isVisible && !dataDialog.disabled"></el-button>
            <el-button @click="resetProductMes()" icon="el-icon-refresh" title="重置" size="mini"
                       v-if="dataDialog.isVisible && !dataDialog.disabled"></el-button>
        </template>
        <element-search  slot="right-header">
            <el-form ref="searchForm" :model="table.searchForm" id="search" :inline="true" size="mini">
                <el-form-item>
                    <el-input v-model="table.searchForm.name" placeholder="请输入名称" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" circle @click="onSearch" ></el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button  icon="el-icon-plus" title="增加" @click="onAdd" circle ></el-button>
                    <el-button type="danger" icon="el-icon-delete" title="批量删除" @click="onDelete" circle></el-button>
                </el-form-item>
            </el-form>
        </element-search>
        <element-table :api="table.api" :tableHeader="table.header" id="roleTable" ref="element_table" :params="table.searchForm" :isOpen="table.isOpen" :isSelection="true"
                       @selection-change="handleSelectionChange" slot="right-main" >
            <el-table-column label="操作" width="250" slot="tableMain">
                <template slot-scope="scope" >
                    <el-button  icon="el-icon-edit" title="修改" @click="onEdit(scope.row)" size="mini"
                                   circle></el-button>
                    <el-button  icon="el-icon-view" title="查看" @click="onShow(scope.row)" size="mini"
                               circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" title="删除" @click="onDelete(scope.row)" size="mini"
                               circle></el-button>

                </template>
            </el-table-column>
        </element-table>
    </element-container>
</template>
<!-- 角色逻辑js-->
<script src="../assets/js/role.js" >
</script>

<style scoped>

</style>
